<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bootstrap-newsWeb</title>
  <!-- 网站图标 -->
  <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />

  <!-- ! bootstrap4基本所需css/js引入 -->
  <link rel="stylesheet" href="./lib/css/bootstrap.css">

  <!-- ! 在bootstarp库引入bootstrap.css后再引入自己写的css  就可以实现覆盖  因为html文档是从上往下读的 -->
  <link rel="stylesheet" href="./css/style.css">

  <!-- zico图标库引入 -->
  <link rel="stylesheet" href="./lib/css/zico.min.css">



</head>

<body>
  <!-- **********************************header区域 start********************************************* -->
  <div id="header"></div>
  <!-- **********************************header区域 end********************************************* -->

  <!-- **********************************新闻内容板块区域 start********************************************* -->
  <section id="cjNewProduct">
    <div class="container">
      <div class="row">
        <!-- 左侧内容区域 -->
        <!-- 左侧列表组（竖向的导航栏目）-切换显示 -->
        <div class="col-lg-2">
          <div class="list-group cjListGroup" id="list-tab" role="tablist">
            <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list"
              href="#list-home" role="tab" aria-controls="home">Home</a>
            <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list"
              href="#list-profile" role="tab" aria-controls="profile">Profile</a>
            <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list"
              href="#list-messages" role="tab" aria-controls="messages">Messages</a>
            <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list"
              href="#list-settings" role="tab" aria-controls="settings">Settings</a>
          </div>
        </div>

        <!-- 根据栏目进行内容的切换区域 -->
        <div class="col-lg-7">
          <div class="tab-content" id="nav-tabContent">
            <!-- 第一个内容区域 -->
            <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
              <!-- 一个新闻内容部分 -->
              <div class="card mb-3">
                <div class="row no-gutters">
                  <div class="col-sm-4 ">
                    <img src="./images/logo.png" class="card-img" alt="...">
                  </div>
                  <div class="col-sm-8 ">
                    <div class="card-body">
                      <a href="./html/news-details.html" class="text-muted cardAtagColor">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                          additional content. This content is a little bit longer.</p>
                        <p class="card-text"><small class="text-muted">
                            <img class="userImg" src="./images/logo.png" alt="">
                            <span>路人A -</span>
                            <span>2020.10.20</span>
                          </small>
                        </p>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 一个新闻内容部分结束 -->
              <!-- 一个新闻内容部分 -->
              <div class="card mb-3">
                <div class="row no-gutters">
                  <div class="col-sm-4">
                    <img src="./images/logo.png" class="card-img" alt="...">
                  </div>
                  <div class="col-sm-8">
                    <div class="card-body">
                      <a href="./html/news-details.html" class="text-muted cardAtagColor">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                          additional content. This content is a little bit longer.</p>
                        <p class="card-text"><small class="text-muted">
                            <img class="userImg" src="./images/logo.png" alt="">
                            <span>路人A -</span>
                            <span>2020.10.20</span>
                          </small>
                        </p>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 一个新闻内容部分结束 -->

            </div>
            <!-- 第一个内容区域结束 -->

            <!-- 第二个内容区域 -->
            <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
              987Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint fugit unde, delectus dolore modi enim
              facere maiores molestiae ab quaerat eveniet ad excepturi ipsum facilis harum adipisci dicta tempora
              vel.
            </div>
            <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
              创建Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint fugit unde, delectus dolore modi enim
              facere maiores molestiae ab quaerat eveniet ad excepturi ipsum facilis harum adipisci dicta tempora
              vel.
            </div>
            <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
              订单Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint fugit unde, delectus dolore modi enim
              facere maiores molestiae ab quaerat eveniet ad excepturi ipsum facilis harum adipisci dicta tempora
              vel.
            </div>
          </div>
        </div>

        <!-- 右侧新闻区域 -->
        <!-- mt-5 mt-lg-0 在大屏中不用距离顶部有距离，因为是在右侧，在小屏时，变成上下结构了，这时才出现与顶部的距离 -->
        <div class="col-lg-3 mt-5 mt-lg-0">
          <!-- 搜索框 -->
          <form class="form-inline  pb-2">
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <button for="inlineFormInputGroup" class="btn btn-outline-success " type="submit">搜索</button>
              </div>
              <input class="form-control" id="inlineFormInputGroup" type="search" placeholder="请输入..."
                aria-label="Search">
            </div>
          </form>
          <!-- 举报电话区域 -->
          <div class="container">
            <div class="row ">
              <div class="card mb-3 bg-light">
                <div class="row no-gutters">
                  <div class="col-4 ">
                    <img src="./images/logo.png" class="card-img" alt="...">
                  </div>
                  <div class="col-8 d-flex align-items-center">
                    <div class="card-body">
                      <p class="card-text ">举报电话：123456</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!--24小时热点区域-->
            <div class="row bg-light">
              <!-- 因为col自带padding-left：15px padding-right：15px  这样看起来这些卡片不好看，所以强制清除这里的padding -->
              <div class="col pl-0 pr-0">
                <div class="text-center mt-1 mb-1 ">
                  <h2><strong>24小时热点</strong></h2>
                </div>
                <div class="list-group cjHotNewsList">
                  <a href="#" class="list-group-item list-group-item-action">
                    <h5 class="card-subtitle mb-1 ">Card subtitle</h5>
                    <p class="card-text mb-0 text-left">
                      集聚强大的IT讲师资源，独特的课程服务模式，通过M2O等新型教育方式。
                    </p>
                    <p class="card-text">
                      <!-- class="text-muted" 这个文字设置为灰色 color被设置为灰色了，所以a标签:hove时的变色对它不起作用 -->
                      <small class="text-muted">
                        <span>1.5万游览</span>
                        <span>300评论</span>
                      </small>
                    </p>
                  </a>
                  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
                  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                  <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>

  </section>
  <!-- **********************************新闻内容板块区域 end********************************************* -->

  <!-- **********************************footer start********************************************* -->
  <div id="footer"></div>
  <!-- **********************************footer end********************************************* -->

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="./lib/js/jquery-3.5.1.min.js"></script>

  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <!-- ! popover提示框组件依赖 Popper.js 进行定位，在必须引入 popper.min.js 在bootstrap.js脚本之前，
          ! 或者使用bootstrap.bundle.min.js / bootstrap.bundle.js（这两个脚本中已经包含了Popper.js可以直接运行弹出提示框）
     -->
  <script src="./lib/js/bootstrap.bundle.js"></script>

  <!-- 自己的js文件 -->
  <script src="./js/main.js"></script>
  <script src="./js/include.js"></script>
</body>

</html>